<template>
    <div class="management-overview">
        <!-- 顶部统计卡片 -->
        <div class="top-stats">
            <div class="stat-card" v-for="(item, index) in statItems" :key="index">
                <div class="icon" :style="{ color: item.color }">
                    <i :class="item.icon"></i>
                </div>
                <div class="content">
                    <div class="label">{{ item.label }}</div>
                    <div class="value">{{ item.value }}</div>
                </div>
            </div>
        </div>

        <!-- 主体内容区 -->
        <div class="main-content">
            <!-- 左侧：新增慢病患者数折线图 -->
            <div class="chart-container">
                <div class="chart-header">
                    <span>新增慢病患者数</span>
                    <div class="time-filter">
                        <span>本周 | 本月 | 本年度</span>
                        <el-select v-model="selectedYear" placeholder="选择年份">
                            <el-option label="2022" value="2022"></el-option>
                            <el-option label="2023" value="2023"></el-option>
                        </el-select>
                    </div>
                </div>
                <div class="chart">
                    <div ref="lineChart" class="line-chart"></div>
                </div>
            </div>

            <!-- 右侧：指标检测异常情况 -->
            <div class="chart-container">
                <div class="chart-header">
                    <span>指标检测异常情况</span>
                    <div class="time-filter">
                        <span>本周 | 本月 | 本进度</span>
                        <el-select v-model="selectedYear" placeholder="选择年份">
                            <el-option label="2022" value="2022"></el-option>
                            <el-option label="2023" value="2023"></el-option>
                        </el-select>
                    </div>
                </div>
                <div class="bar-list">
                    <div v-for="(item, index) in abnormalIndicators" :key="index" class="bar-item">
                        <div class="label">{{ item.label }}</div>
                        <div class="progress-bar">
                            <div class="progress" :style="{ width: `${item.percent}%` }"></div>
                        </div>
                        <div class="count">{{ item.count }}/{{ item.total }}</div>
                    </div>
                </div>
            </div>

            <!-- 底部左侧：慢病患者分布（横向条形图） -->
            <div class="chart-container">
                <div class="chart-header">
                    <span>慢病患者分布</span>
                </div>
                <div class="horizontal-bar-chart">
                    <div v-for="(item, index) in diseaseDistribution" :key="index" class="bar-item">
                        <div class="label">{{ item.name }}</div>
                        <div class="bar-wrapper">
                            <div class="bar" :style="{ width: `${item.width}%`, backgroundColor: item.color }"></div>
                            <div class="value">{{ item.value }}</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 底部右侧：慢病患者年龄分布（堆叠柱状图） -->
            <div class="chart-container">
                <div class="chart-header">
                    <span>慢病患者年龄分布</span>
                </div>
                <div class="stacked-bar-chart">
                    <div ref="stackedBarChart" class="stacked-bar-chart-container"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    name: 'ManagementOverviewView',
    data() {
        return {
            // 统计卡片数据（已封装）
            statItems: [
                { label: '患者总数', value: 2231, icon: 'el-icon-user', color: '#409eff' },
                { label: '高血压患者数', value: 1632, icon: 'el-icon-heart', color: '#f56c6c' },
                { label: '糖尿病患者数', value: 1632, icon: 'el-icon-droplet', color: '#67c23a' },
                { label: '慢阻肺患者数', value: 1632, icon: 'el-icon-lungs', color: '#99d8ff' },
                { label: '脑卒中患者数', value: 1632, icon: 'el-icon-brain', color: '#e6a23c' }
            ],

            selectedYear: '2022',

            abnormalIndicators: [
                { label: '血压异常人数', count: 213, total: 3465, percent: 6.1 },
                { label: '血糖异常人数', count: 213, total: 3465, percent: 6.1 },
                { label: '血脂异常人数', count: 213, total: 3465, percent: 6.1 },
                { label: '体质指数异常人数', count: 213, total: 3465, percent: 6.1 },
                { label: '尿酸异常人数', count: 213, total: 3465, percent: 6.1 }
            ],

            diseaseDistribution: [
                { name: '高血压', value: 864, width: 70, color: '#f56c6c' },
                { name: '糖尿病', value: 856, width: 69, color: '#67c23a' },
                { name: '高血脂', value: 844, width: 68, color: '#99d8ff' },
                { name: '肥胖症', value: 804, width: 65, color: '#409eff' },
                { name: '高尿酸', value: 732, width: 59, color: '#e6a23c' }
            ]
        };
    },
    mounted() {
        this.initLineChart();
        this.initStackedBarChart();
    },
    methods: {
        initLineChart() {
            const chart = echarts.init(this.$refs.lineChart);
            chart.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                xAxis: {
                    type: 'category',
                    data: ['10-23', '10-24', '10-25', '10-26', '10-27'],
                    axisLabel: {
                        color: '#666',
                        fontSize: 12
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        color: '#666',
                        fontSize: 12
                    }
                },
                series: [
                    {
                        name: '新增患者',
                        type: 'line',
                        smooth: true,
                        lineStyle: {
                            color: '#409eff',
                            width: 2
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#409eff' },
                                { offset: 1, color: '#b3d8ff' }
                            ])
                        },
                        data: [30, 25, 60, 30, 15]
                    }
                ],
                grid: {
                    left: '10%',
                    right: '10%',
                    bottom: '15%',
                    top: '15%'
                }
            });
        },

        initStackedBarChart() {
            const chart = echarts.init(this.$refs.stackedBarChart);
            chart.setOption({
                tooltip: {
                    trigger: 'item'
                },
                xAxis: {
                    type: 'category',
                    data: ['35岁以下', '35-40岁', '40-45岁', '45-50岁', '50-55岁', '55-60岁', '60岁以上'],
                    axisLabel: {
                        color: '#666',
                        fontSize: 12
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        color: '#666',
                        fontSize: 12
                    }
                },
                series: [
                    {
                        name: '男性',
                        type: 'bar',
                        stack: '总量',
                        barWidth: '20px',
                        itemStyle: {
                            color: '#409eff'
                        },
                        data: [40, 40, 50, 70, 60, 120, 180]
                    },
                    {
                        name: '女性',
                        type: 'bar',
                        stack: '总量',
                        barWidth: '20px',
                        itemStyle: {
                            color: '#67c23a'
                        },
                        data: [20, 30, 20, 50, 70, 120, 150]
                    }
                ],
                legend: {
                    show: false
                },
                grid: {
                    left: '10%',
                    right: '10%',
                    bottom: '15%',
                    top: '15%'
                }
            });
        }
    }
};
</script>

<style scoped>
.management-overview {
    padding: 20px;
    background-color: #f5f7fa;
}

.top-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}

.stat-card {
    flex: 1;
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.stat-card .icon {
    font-size: 36px;
    margin-bottom: 12px;
}

.stat-card .content {
    font-size: 14px;
}

.stat-card .label {
    color: #666;
    font-weight: 500;
}

.stat-card .value {
    font-size: 28px;
    font-weight: bold;
    color: #303133;
}

.main-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.chart-container {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.chart-header span {
    font-size: 16px;
    font-weight: 600;
    color: #303133;
}

.time-filter {
    display: flex;
    align-items: center;
    gap: 8px;
}

.time-filter span {
    font-size: 12px;
    color: #999;
}

.bar-list {
    margin-top: 10px;
}

.bar-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 14px;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.bar-item .label {
    flex: 1;
    color: #303133;
}

.bar-item .progress-bar {
    flex: 2;
    height: 10px;
    background-color: #ebeef5;
    border-radius: 5px;
    overflow: hidden;
}

.bar-item .progress {
    height: 100%;
    background-color: #409eff;
    border-radius: 5px;
}

.horizontal-bar-chart {
    margin-top: 10px;
}

.horizontal-bar-chart .bar-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 14px;
}

.horizontal-bar-chart .bar-wrapper {
    display: flex;
    align-items: center;
    width: 200px;
    position: relative;
}

.horizontal-bar-chart .bar {
    height: 16px;
    border-radius: 8px;
    margin-right: 8px;
}

.horizontal-bar-chart .value {
    margin-left: 8px;
    font-size: 12px;
    color: #666;
}

.stacked-bar-chart {
    margin-top: 10px;
}

.stacked-bar-chart-container {
    width: 100%;
    height: 300px;
}
</style>